<template>
    <div class="choiceness">
        <van-skeleton title avatar :row="3" :loading="isShowSkeleton" animate>
            <!-- 轮播图 -->
            <div class="Banner" v-if="AllData !== null">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item, index) in BannerData" :key="index">
                        <img :src="item.cover" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 分类 -->
            <div class="sort">
                <div class="sort-item" v-for="(item, index) in shortCut" v-if="AllData.length > 0" @click="goTopClassify">
                    <!-- shortCut -->
                    <div class="img-box">
                        <img :src="item.cover" />
                    </div>
                    <div class="text">{{ item.name }}</div>
                </div>
            </div>
            <!-- 本周强推 -->
            <div class="intensity-box">
                <div class="title" v-if="AllData !== null">{{ AllData[2].name }}</div>
                <!-- 第一本书 -->
                <div class="first" v-for="item in intensityOne" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="BookTitle">{{ item.title }}</div>
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="desc">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <!-- 四本书 -->
            <div class="Books">
                <div class="Books-item" v-for="(item, index) in intensity" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="name">{{ item.title }}</div>
                    <div class="author">{{ item.author }}</div>
                </div>
            </div>
            <!-- 本周爆款 -->
            <div class="Hot">
                <div class="title" v-if="AllData !== null">{{ AllData[3].name }}</div>
                <div class="Hot-item" v-for="(item, index) in HotData" @click="goBookDetails(item.id, item.title)" :key="index">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="desc">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <!-- 24小时热销榜 -->
            <div class="hot-sell">
                <div class="title" v-if="AllData !== null">{{ AllData[4].name }}</div>
                <div class="item-box">
                    <div class="item" v-for="(item, index) in HotSellData" :key="index" @click="goBookDetails(item.id, item.title)">
                        <b :class="'icon_' + `${index + 1}`"></b>
                        <div class="img-box">
                            <img class="img-auto" :src="item.cover" />
                        </div>
                        <div class="name">{{ item.title }}</div>
                    </div>
                </div>
                <div class="more-icon" @click="goTopClassify">
                    <div class="more">查看榜单</div>
                    <div class="img-box icon-more">
                        <img class="img-auto" src="../assets/images/more.png" />
                    </div>
                </div>
            </div>
            <!-- 精品必读 -->
            <div class="Boutique">
                <div class="title" v-if="AllData !== null">{{ AllData[5].name }}</div>
                <div class="Boutique-item" v-for="(item, index) in Boutique" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="desc">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <!-- 高能剧情 -->
            <div class="High">
                <div class="title" v-if="AllData !== null">{{ AllData[6].name }}</div>
                <div class="High-item" v-for="(item, index) in High" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="desc">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <!-- 完结榜 -->
            <div class="end">
                <div class="title" v-if="AllData !== null">{{ AllData[7].name }}</div>
                <div class="item-box">
                    <div class="item" v-for="(item, index) in endData" :key="index" @click="goBookDetails(item.id, item.title)">
                        <b :class="'icon_' + `${index + 1}`"></b>
                        <div class="img-box">
                            <img class="img-auto" :src="item.cover" />
                        </div>
                        <div class="name">{{ item.title }}</div>
                    </div>
                </div>
                <div class="more-icon" @click="goTopClassify">
                    <div class="more">查看榜单</div>
                    <div class="img-box icon-more">
                        <img class="img-auto" src="../assets/images/more.png" />
                    </div>
                </div>
            </div>
            <!-- 优质好文 -->
            <div class="good">
                <div class="title" v-if="AllData !== null">{{ AllData[8].name }}</div>
                <div class="good-item" v-for="(item, index) in goodData" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="desc">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <!-- 大家都在看 -->
            <div class="GMYJ">
                <div class="title" v-if="AllData !== null">{{ AllData[9].name }}</div>
                <div class="GMYJ-item" v-for="(item, index) in GMYJData" v-if="AllData !== null" @click="goBookDetails(item.id, item.title)">
                    <!-- @click="GoBookContent(item.id)" -->
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="desc">{{ item.content }}</div>
                    </div>
                </div>
            </div>
            <div class="foot">我是有底线的(*^▽^*)</div>
        </van-skeleton>
    </div>
</template>

<script>
// import {getChoiceness} from '../api/ChoicenessData.js'
export default {
    name: "Choiceness",

    data() {
        return {
            // 分类信息
            AllData: null,
            // 轮播下分类
            shortCut: null,
            // 本周强推
            intensity: null,
            // 强推第一个数据
            intensityOne: [],
            ChoicenessData: [],
            // 本周爆款数据
            HotData: null,
            // 24小时热销榜
            HotSellData: null,
            // 精品必读
            Boutique: null,
            // 高能剧情
            High: null,
            // 完结榜
            endData: null,
            // 优质好文
            goodData: null,
            // 大家都在看
            GMYJData: null,
            // 是否显示骨架屏
            isShowSkeleton: true,
        };
    },
    methods: {
        // 跳转书籍详情
        goBookDetails(BookId, title) {
            this.$router.push({
                name: "BookDetails",
                query: {
                    BookId,
                    title,
                },
            });
        },
        // 请求数据
        getChoiceness() {
            this.axios({
                method: "get",
                url: "store/show.json",
                params: {
                    type: "recommend",
                    uuid: "f2cb32ff209f4010911a77a617add8c4",
                },
            })
                .then((res) => {
                    this.isShowSkeleton = false;
                    // ('res==>',res);
                    // (res);
                    this.AllData = res.data.data.list;
                    // 轮播图
                    this.BannerData = this.AllData[0].banners;
                    // 轮播图下分类
                    this.shortCut = this.AllData[1].shortCut;
                    //
                    // 本周强推
                    this.intensity = this.AllData[2].list;
                    // 本周强推第一个数据
                    this.intensity.forEach((item, index) => {
                        // 单独拿出第一个数据
                        if (index == 0) {
                            this.intensityOne.push(item);
                        }
                    });
                    // 删掉第一个数据
                    this.intensity.shift();
                    // 本周爆款
                    this.HotData = this.AllData[3].list;
                    // 24小时热销榜
                    this.HotSellData = this.AllData[4].list;
                    // 精品必读
                    this.Boutique = this.AllData[5].list;
                    // 高能剧情
                    this.High = this.AllData[6].list;
                    // 完结榜
                    this.endData = this.AllData[7].list;
                    // 优质好文
                    this.goodData = this.AllData[8].list;
                    // 大家都在看
                    this.GMYJData = this.AllData[9].list;
                })
                .catch((err) => {
                    "err==>", err;
                });
        },
        goTopClassify() {
            this.$router.push({
                name: "TopClassify",
            });
        },
    },

    created() {
        this.getChoiceness();
    },
    mounted() {},
};
</script>

<style lang="less" scoped>
.choiceness {
    height: 522px;
    overflow-y: auto;
    background-color: #f7f8f8;
    // 去掉滚动条
    &::-webkit-scrollbar {
        display: none;
    }
    .foot {
        width: 100%;
        height: 40px;
        background-color: #ecefef;
        text-align: center;
        line-height: 40px;
    }
    .hot-sell,
    .end {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        .more-icon {
            display: flex;
            .more {
                width: 50px;
                color: #686969;
                display: block;
                margin: 20px auto;
            }
            .icon-more {
                position: relative;
                width: 16px;
                height: 16px;
                top: 20px;
                left: -140px;
            }
        }
        .item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            .item {
                width: calc(33.333%);
                margin-right: 18px;
                position: relative;
                b {
                    position: absolute;
                    top: -12px;
                    left: 0px;
                    right: 0;
                    width: 100%;
                    height: 40px;
                    z-index: 9;
                }
                .icon_1 {
                    background: url(../assets/images/icon_1.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_2 {
                    background: url(../assets/images/icon_2.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_3 {
                    background: url(../assets/images/icon_3.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .img-box {
                    width: 100%;
                    height: 90%;
                }
                .name {
                    width: 100%;
                    height: 20%;
                    line-height: 20px;
                }
            }
        }
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
    }
    .Hot,
    .Boutique,
    .High,
    .good,
    .GMYJ {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 5px;
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
        .Hot-item,
        .Boutique-item,
        .High-item,
        .good-item,
        .GMYJ-item {
            width: 100%;
            margin: 15px auto;
            display: flex;
            .img-box {
                width: 20%;
                height: 100px;
            }
            .RigMsg {
                width: calc(80% - 15px);
                margin-left: 10px;
                .name {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 5px;
                }
                .author-type {
                    color: #686969;
                    margin-bottom: 10px;
                }
                .desc {
                    width: 265px;
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                    text-align-last: left;
                    color: #686969;
                }
            }
        }
    }
    .Books {
        width: 350px;
        margin: 0 auto;
        display: flex;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 15px;

        .Books-item {
            width: 22%;
            margin-right: 16px;
            img:nth-child(3) {
                height: 99px;
            }
            &:nth-child(4) {
                margin-right: 0;
            }
            .name {
                width: 74px;
                font-size: 14px;
                margin: 5px 0;
            }
            .author {
                color: #686969;
            }
        }
    }
    .intensity-box {
        width: 350px;
        margin: 20px auto;
        .first {
            width: 100%;
            margin: 0 auto;
            display: flex;
            .img-box {
                width: 80px;
                height: 100px;
            }
            .RigMsg {
                margin-left: 10px;
                width: calc(100% - 80px);
                .BookTitle {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 5px;
                }
                .author-type {
                    color: #686969;
                    margin-bottom: 10px;
                }
                .desc {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    width: 276px;
                    text-align-last: left;
                    color: #686969;
                }
            }
        }
        .title {
            width: 80px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
    }
    .Banner {
        width: 350px;
        // background-color: pink;
        margin: 10px auto;
        .van-swipe-item {
            text-align: center;
            img {
                width: 96%;
                display: inline-block;
            }
        }
        ::v-deep {
            .van-swipe__indicators {
                position: fixed;
                bottom: 8px;
                left: 8%;
            }
        }
    }
    .sort {
        width: 350px;
        height: 60px;
        margin: 0 auto;
        display: flex;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 5px;
        .sort-item {
            width: 20%;
            .img-box {
                width: 100%;
                height: 70%;
                text-align: center;
                img {
                    width: 70%;
                    margin: -5px auto;
                }
            }
            .text {
                width: 100%;
                text-align: center;
            }
        }
    }
}
</style>
